<!-- <template>
  <el-form label-width="100px" :model="formData" :rules="rules">
    <el-form-item label="图片">
      <el-upload
        ref="upload"
        :limit="1"
        :auto-upload="false"
        list-type="picture"
        :on-change="onChange"
        :on-exceed="onExceed"
        prop="img"
      >
        <template #trigger>
          <el-button type="primary">select file</el-button>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item label="图片文111案" prop="alt">
      <el-input v-model="formData.alt"/>
    </el-form-item>
    <el-form-item label="跳转链接" prop="link">
      <el-input v-model="formData.link" />
    </el-form-item>
    <el-form-item>
      <el-button @click="handleSubmit">提交1111111111</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { genFileId } from 'element-plus'
import { addBanner } from '../services/index' 
export default {
  emits: ['add-success'],
  data() {
    return {
      formData: {
        img: '',
        alt: '',
        link: '',
      },
      rules: {
        img: [
          { required: true, trigger: 'blur', message: '请选择图片' }
        ],
        alt: [
          { required: true, trigger: 'blur', message: '请输入图片文案'}
        ],
        link: [
          { required: true, trigger: 'blur', message: '请输入跳转链接' }
        ]
      }
    }
  },
  methods: {
    onChange(file) {
      const fileReader = new FileReader()
      fileReader.onload = () => {
        this.formData.img = fileReader.result
      }
      fileReader.readAsDataURL(file.raw)
    },
    onExceed(files) {
      const uploadRef = this.$refs.upload
      uploadRef.clearFiles()

      const file = files[0]
      file.uid = genFileId()
      uploadRef.handleStart(file)
    },
    handleSubmit() {
      addBanner(this.formData).then((result) => {
        this.$emit('add-success')
      })
    }
  }
}
</script> -->
